<template>
	<div :style="{backgroundImage:'url('+data.url+')',height:data.heightUser+'px'}" class="box-backimage">
		<div v-show="data.isShow">
			<div :style="{backgroundImage:'url('+data.user.userAvator+')'}" class="box-userimage"></div>

			<div style="width: 100%;">
				<span class="txt1">用户名：
					<input v-model="data.user.userName" :placeholder="data.user.userName" type="text"
						style="float: right;text-align: left;" />
				</span>
			</div>
			<div style="width: 100%;">
				<span class="txt1">个性签名：
					<input v-model="data.user.userSignature" :placeholder="data.user.userSignature" type="text"
						style="float: right;text-align: left;" />
				</span>
			</div>
		</div>

		<view class="sun-page" style="margin-top: 200px;">
			<button type="primary" style="background-color: #12C8B9;" @click="handleUpdate">修改个人资料</button>
		</view>
		<view class="sun-page">
			<button type="primary" style="background-color: #12C8B9;" @click="handleLogout">退出登录</button>
		</view>
	</div>
</template>

<script>
	import {
		reactive,
		onMounted,
		onActivated,
		toRefs
	} from 'vue'
	import {
		useAppStore
	} from '@/store/modules/app.js'
	export default {
		setup() {
			const userStore = useAppStore()
			let data = reactive({
				user: {
					userName: '',
					userAvator: '',
					userSignature: '',
					userEmail: ''
				},
				url: '',
				isShow: false,
				heightUser: '',
			});

			function handleUpdate() {
				uni.getSystemInfo({
					success: function(res) {
						data.heightUser = res.windowHeight;
					}
				})
				if (data.user.userEmail === '') {
					uni.showToast({
						title: "未登录",
						icon: 'none',
						duration: 1500
					})
					return;
				}
				uni.request({
					url: 'http://175.178.249.171:8092/api/user/update',
					method: 'PUT',
					data: JSON.stringify(data.user),
					success: (res) => {
						if (res.data.data === '修改成功') {
							uni.showToast({
								title: "修改成功",
								icon: 'none',
								duration: 1500
							})
						}
					}
				})
			}


			onMounted(() => {
				uni.getSystemInfo({
					success: function(res) {
						data.heightUser = res.windowHeight;
					}
				})
				if (userStore.userId === '') {
					uni.showToast({
						title: "未登录",
						icon: 'none',
						duration: 1500
					})
					return;
				}
				data.url = userStore.url
				uni.request({
					url: 'http://175.178.249.171:8092/api/user/get/' + userStore.userEmail,
					method: 'GET',
					success: (res) => {
						data.user = res.data.data
						data.user.userEmail = userStore.userEmail
						userStore.url = res.data.data.mainSkin
						userStore.user = res.data.data
						data.url = userStore.url
						data.isShow = true
					},
				});
			});

			onActivated(() => {
				uni.getSystemInfo({
					success: function(res) {
						data.heightUser = res.windowHeight;
					}
				})
				if (userStore.userId === '') {
					uni.showToast({
						title: "未登录",
						icon: 'none',
						duration: 1500
					})
					return;
				}
				data.url = userStore.url
			})

			return {
				handleUpdate,
				data,
				...toRefs(data),
			};
		},
		methods: {
			handleLogout() {
				uni.reLaunch({
					url: '/pages/login/login'
				})
			}
		}
	}
</script>


<style>
	.box-backimage {
		width: 100%;
		background-repeat: repeat;
		background-size: 100% auto;
		background-position: 0 100%;
		position: absolute;
	}

	.txt1 {
		display: inline-block;
		width: 100%px;
		text-align: right;
	}

	.box-userimage {
		width: 40%;
		margin: auto;
		height: 180px;
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-position: 0 100%;
	}

	.box-userimage img {
		width: 100%;
		height: 100%;
	}
</style>
